<template>
  <el-card class="resource-card" shadow="never">
    <div class="resource-card-header">
      <div class="header-left">
        <el-icon class="card-icon"><component :is="icon" /></el-icon>
        <span class="card-title">{{ title }}</span>
        <el-tooltip v-if="tooltip" :content="tooltip" placement="top" effect="dark" :offset="8">
          <el-icon class="header-icon"><InfoFilled /></el-icon>
        </el-tooltip>
      </div>
      <div class="header-right">
        <span class="usage-percent">{{ used }}{{ unit }}</span>
      </div>
    </div>
    <div class="resource-card-body">
      <el-progress
        :percentage="parseFloat(used || 0)"
        :stroke-width="10"
        :color="color"
        :show-text="false"
      />
      <div class="usage-desc">{{ desc }}</div>
    </div>
  </el-card>
</template>

<script setup>
import { ElCard, ElProgress, ElIcon, ElTooltip } from 'element-plus'
import { InfoFilled } from '@element-plus/icons-vue'
/**
 * 通用资源使用率卡片组件
 * @param {String|Object} icon - 图标组件或名称
 * @param {String} title - 标题
 * @param {String|Number} used - 已用百分比
 * @param {String} unit - 单位
 * @param {String} desc - 描述
 * @param {String} color - 进度条颜色
 * @param {String} tooltip - 标题栏的提示信息
 */
defineProps({
  icon: { type: [Object, Function, String], required: true },
  title: { type: String, required: true },
  used: { type: [String, Number], required: true },
  unit: { type: String, default: '%' },
  desc: { type: String, default: '' },
  color: { type: String, default: 'var(--el-color-primary)' },
  tooltip: { type: String, default: '' },
})
</script>

<style lang="scss" scoped>
@use '@/assets/styles/mixins.scss' as *;

.resource-card-header {
  @include flex-between;
}

.header-left {
  @include flex-center(0);

  .card-icon {
    font-size: 20px;
    color: var(--el-text-color-secondary);
  }
  .card-title {
    font-size: 15px;
    font-weight: 500;
    margin: 0 6px 0 8px;
  }
  .header-icon {
    color: var(--el-text-color-secondary);
    cursor: help;
    &:hover {
      color: var(--el-text-color-primary);
    }
  }
}

.header-right .usage-percent {
  font-size: 24px;
  font-weight: bold;
  font-family: 'Courier New', Courier, monospace;
  color: var(--el-color-primary);
}

.resource-card-body {
  margin-top: 12px;
  .usage-desc {
    font-size: 13px;
    color: var(--el-text-color-secondary);
    margin-top: 10px;
    font-family: 'Courier New', Courier, monospace;
    text-align: right;
  }
}
</style>
